<template>
  <view class="my-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      custom-style="background-color: transparent;z-index: 20;"
      fixed
      :border="false"
    >
      <template v-slot:title>
        <view class="my-title">我的</view>
      </template>
    </van-nav-bar>

    <!-- 顶部背景区域 -->
    <view class="my-header">
      <image
        class="my-header-bg"
        src="/static/icon/bg.png"
        mode="widthFix"
      />
      <view class="my-header-info">
        <view class="my-header-info-left">
          <image
            class="my-avatar"
            :src="formatImgUrl(userInfo.avatar)"
            mode="aspectFill"
            @click="goToProfile"
          />
        </view>
        <view class="my-header-info-right">
          <view class="my-username">{{ userInfo.nickName || '微信用户' }}</view>
          <view
            v-if="userInfo.enterpriseName"
            class="my-company"
            >{{ userInfo.enterpriseName || '' }}</view
          >
          <!-- <view v-if="userInfo.enterpriseAddress" class="my-company" style="margin-top: 8rpx;">{{ userInfo.enterpriseAddress }}</view> -->
        </view>
      </view>
    </view>
    <!-- 功能列表区域 -->
    <view class="my-list">
      <block
        v-for="(item, index) in list"
        :key="index"
      >
        <van-cell
          v-if="item.permission"
          :key="index"
          :title="item.text"
          is-link
          :border="false"
          custom-class="my-list-cell"
          :custom-style="index === 0 ? 'padding-top: 50rpx;' : ''"
          size="large"
          @click="handleClick(item)"
        >
          <template #icon>
            <image
              :src="item.icon"
              class="my-list-icon"
              mode="aspectFit"
            />
          </template>
        </van-cell>
      </block>
    </view>
    <TabBar active="my" />
  </view>
</template>

<script>
  import TabBar from '../../components/TabBar.vue'
  import { getUserByOpenId, teaPricesPermission } from '../../api/personal.js'
  import { logout } from '../../api/user.js'
  import { formatImgUrl } from '../../common/utils.js'
  export default {
    components: { TabBar },
    data() {
      return {
        list: [
          {
            icon: '/static/icon/activity_icon.png',
            text: '活动报名',
            permission: true,
            url: '/pagesA/article/index?isSelf=1'
          },
          {
            icon: '/static/icon/enter_icon.png',
            text: '茶价格录入',
            url: '/pagesA/my/tea-price-input',
            permission: true
          },
          {
            icon: '/static/icon/modifying_icon.png',
            text: '修改资料',
            url: '/pagesA/my/profile-edit',
            permission: true
          },
          // {
          //   icon: "/static/icon/posted_icon.png",
          //   text: "帖子发布",
          //   url: "/pagesA/my/post-publish"
          // },
          {
            icon: '/static/icon/out_icon.png',
            text: '退出登录',
            permission: true,
            click: () => {
              logout().then(() => {
                uni.removeStorageSync('user')
                uni.removeStorageSync('token')
                uni.reLaunch({
                  url: '/pages/index/index'
                })
              })
            }
          }
        ],
        userInfo: {
          avatar: '',
          nickName: '',
          enterpriseName: '',
          enterpriseAddress: ''
        }
      }
    },
    onShow() {
      this.loadUserInfo()
    },
    methods: {
      formatImgUrl,
      goToProfile() {
        uni.navigateTo({ url: '/pagesA/my/profile-edit' })
      },
      async loadUserInfo() {
        const user = uni.getStorageSync('user')
        const openId = user.openId
        try {
          const res2 = await teaPricesPermission({ openId })
          console.log('res2: ', res2)
          this.list[1].permission = res2.data
          const res = await getUserByOpenId({ openId })
          this.userInfo = res.data
        } catch (e) {
          console.log('e: ', e)
        }
      },
      handleClick(item) {
        console.log('item: ', item)
        if (item.click) {
          item.click()
          return
        }
        if (item.url) {
          uni.navigateTo({
            url: item.url
          })
        } else {
          uni.showToast({
            title: '功能开发中',
            icon: 'none'
          })
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .my-page {
    min-height: 100vh;
    background: #fff;
    position: relative;
  }
  .my-title {
    color: #fff;
    font-size: 20px;
    font-weight: bold;
  }
  .my-header {
    position: relative;
    width: 750rpx;
    height: 494rpx;
    .my-header-bg {
      width: 750rpx;
      height: 494rpx;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
    }
    .my-header-right-btn {
      width: 44rpx;
      height: 44rpx;
      position: absolute;
      right: 32rpx;
      top: 40rpx;
      z-index: 3;
    }
    .my-header-info {
      position: absolute;
      left: 0;
      top: 200rpx;
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      z-index: 2;
      padding: 0 48rpx;
      box-sizing: border-box;
      .my-header-info-left {
        flex-shrink: 0;
        .my-avatar {
          width: 160rpx;
          height: 160rpx;
          border-radius: 80rpx 32rpx 80rpx 32rpx;
          border: 6rpx solid #fff;
          background: #eee;
          object-fit: cover;
          display: block;
        }
      }
      .my-header-info-right {
        margin-left: 32rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .my-username {
          font-size: 40rpx;
          color: #fff;
          font-weight: bold;
          text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.18);
        }
        .my-company {
          margin-top: 16rpx;
          font-size: 28rpx;
          color: #fff;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 8rpx;
          padding: 4rpx 24rpx;
          display: inline-block;
          width: fit-content;
        }
      }
    }
  }
  .my-list {
    margin-top: -60rpx;
    position: relative;
    z-index: 2;
    border-top-left-radius: 40rpx;
    border-top-right-radius: 40rpx;
    overflow: hidden;
    background: #fff;
    .my-list-cell {
      .my-list-icon {
        width: 44rpx;
        height: 44rpx;
        margin-right: 24rpx;
        vertical-align: middle;
        border-radius: 8rpx;
        background: #f5f6fa;
      }
    }
  }
</style>
